<template>
  <div class="box">
    <!-- 头部 -->
    <h4>
      <a class="el-icon-arrow-left return" @click="returncomm"></a>
      <span>发表文章</span>
      <a class="getshow" @click="publish" disabled>发表</a>
    </h4>
    <!-- 主体 -->
    <div class="box_list">
      <textarea
        v-model="textarea"
        class="textarea"
        placeholder="此刻您想说的话..."
         maxlength="100"
      ></textarea>
      <el-upload
        action="/api/community/articp"
        list-type="picture-card"
        :auto-upload="true"
        :on-success="handleAvatarSuccess"
        ref="upload"
        :limit=1
        class="img"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      photo: [],
      url: "http://test.com:3000/cache/",
    };
  },
  methods: {
    //   发布文章
    publish() {
      if (this.textarea != "") {
        this.$http
          .post("/api/community/add", {
            uid: this.$jwt(localStorage.getItem("User-Token")).uid,
            release_time: this.$time(Date.now()),
            content_text: this.textarea,
            puc_url: this.photo
          })
          .then((res) => {
            if (res.code == 200) {
              this.$router.push({
                path: "/community",
              });
              this.$message({
                message: '发布文章成功',
                type: 'success'
              })
            }
          });
      } else {
        return;
      }
    },
    returncomm() {
      this.$router.push({
        path: "/community",
      });
    },
    handleRemove(file) {
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
      this.photo.splice(index, 1);
      // console.log(this.photo);
    },
    handleAvatarSuccess(res) {
        if(res.code == 200) {
          this.photo.push(res.add)      
        }
        
        // console.log(this.photo);
      }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.box {
  height: auto;
  h4 {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 2rem;
    color: #fff;
    margin: 0;
    text-align: center;
    background-color: #000;
    .return {
      text-align: left;
    }
    a {
      flex: 2;
      line-height: 2rem;
    }
    span {
      flex: 8;
      font-size: 1rem;
      line-height: 2rem;
    }
    .getshow {
      margin-top: 0.3rem;
      height: 1.4rem;
      width: 2rem;
      border-radius: 0.2rem;
      line-height: 1.4rem;
      font-size: 14px;
      background-color: rgb(73, 73, 73);
      border: 1px solid rgb(97, 96, 96);
    }
  }
  .box_list {
    position: absolute;
    top: 2rem;
    width: 100%;
    overflow: hidden;
    height: calc(100vh - 4rem);
    background-color: #181818;
    .textarea {
      margin-top: 0.5rem;
      width: 96%;
      height: 6rem;
      color: #fff;
      margin-left: 2%;
      outline: none;
      border: none;
      border-bottom: 1px solid #ccc;
      background-color: #181818;
    }
    .img {
      width: 2rem;
    }
  }
}

</style>